<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>博客登录页面</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        /* 超小屏幕（手机，小于 768px） */
        /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

        /* 小屏幕（平板，大于等于 768px） */
        @media (min-width: 768px) {
            #slider-sub{
                width: 250px;
                margin-top: 51px;
                position: absolute;
                z-index: 1;
                background: #052b64;
                height: 900px;
            }
            .mysearch{
                margin: 10px 0;
            }
            /*右边核心区域的设置*/
            .page_main{
                margin-left: 255px;
            }
        }
        .update{
            background: #ffffff;
            border: 1px solid #dddddd;
            border-radius: 10px;
            margin: 10px;
            right: 45%;
            top: 50%;
        }
        body{
            background: url("https://com-hqj-oss.oss-cn-beijing.aliyuncs.com/nanfen/bg2.jpg");
            color: #fff3cd;
        }
        .index-title{
            background: rgba(42, 101, 152,0.8);
            border-radius: 10px;
            margin-top: 5px;
            margin: 0 auto;
        }
        .title-name{
            height: 50px;
            text-align: center;
            padding-top: 7px;
        }
        .intro{
            border-bottom:1px solid #dddddd;
            /* border-radius: 10px; */
            width: 800px;
            margin: 0 auto;
            height: 50px;
            display: flex;
            justify-content: center;
            line-height: 50px;
        }
        .content{
            max-width: 1000px;
            margin: 0 auto;
            height: 100%;
            margin-top: 10px;
            text-align: center;
        }
        .comment{
           height: auto;
           max-width: 800px;
           border-top: 1px solid #dddddd;
           margin: 0 auto ;
          
           
           /* border-radius: 10px; */
        }
        .img-circle{
            width: 40px;
            height: 40px;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div   class="index-title" >
    <div class="title-name">
      <h4>这是一篇非常好的博客文章</h4>
    </div>
    <div class="intro">
        <div>
            <button type="button" class="btn btn-danger btn-xs">原创</button>
        </div>
       <div style="display: flex;">
        <div>
            <button type="button" class="btn btn-primary btn-xs">原创作者：</button> 
        </div>
       <div style="margin: 10px 5px;">
        <h6>紫檀添香</h6>
       </div>
       </div>
     
        <div style="display: flex;">
            <div>
                <button type="button" class="btn btn-primary btn-xs">发表时间：</button> 
            </div>
           <div style="margin: 10px 5px;">
            <h6>2020-10-29</h6>
           </div> 
       </div>
    </div>
    <div class="content" >
       <h5>这是一个非常不错的小标题</h5>
       <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=287313368,2980238600&fm=26&gp=0.jpg">
       <p>这是非常不错的文章</p>
       <p>未来人类将会被机器人取代</p>
       <p>这是非常不错的文章</p>
       <p>未来人类将会被机器人取代</p>
       <p>这是非常不错的文章</p>
       <p>未来人类将会被机器人取代</p>
       <p>这是非常不错的文章</p>
    </div>
    <!-- 评论部分 -->
    <div class="comment">
           <div style="width: 100%;">
            <form class="form-inline">
                <div class="form-group" style="margin-top: 10px;"> 
                  <label  for="exampleInputName2">紫檀添香</label>
                  <textarea class="form-control "  rows="3" placeholder="优质的评论可以帮助作者获得更高的权重"></textarea>
                </div>
                    <button type="submit" class="btn btn-danger">立即发表</button>
              </form> 
           </div>
           <div>
           <div style="display: flex;padding-top: 10px;">
              <div>
                <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=251289958,1860898046&fm=26&gp=0.jpg" alt="Responsive image" class="img-circle"> 
              </div>
              <div style="margin-left: 5px;">
                <button type="button" class="btn btn-primary">紫檀添香</button>
              </div> 
           </div>
           <div style="margin-left: 45px;">
              <h6>这篇博客还是非常的好的</h6> 
              <div style="display: flex;justify-content: space-between;max-width: 220px;">
                  <div>
                      <p>2020-08-30</p>
                  </div>
                  <div>
                    <span style="color: red;" class=" glyphicon glyphicon-star" aria-hidden="true"></span> 
                    <span>1000</span>
                  </div>
                  <div>
                    <button type="button" class="btn btn-primary btn-xs">回复</button>
                  </div>
                  <div>
                    <button type="button" class="btn btn-primary btn-xs">举报</button>
                  </div>
              </div>
           
           
           
            </div>
            <div style="display: flex;padding-top: 10px;margin-left: 45px;">
                <div>
                  <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2057588226,2402156864&fm=11&gp=0.jpg" alt="Responsive image" class="img-circle"> 
                </div>
                <div style="margin-left: 5px;">
                  <button type="button" class="btn btn-primary">我是王二</button>
                </div> 
             </div>
             <div style="margin-left: 45px;">
                <h6><span style="color: red;" >@</span>
                    <button type="button" class="btn btn-primary btn-xs">紫檀添香</button>
                    这是回复你的评论，支持你！</h6> 
                <div style="display: flex;justify-content: space-between;max-width: 220px;">
                    <div>
                        <p>2020-08-30</p>
                    </div>
                    <div>
                      <span style="color: red;" class=" glyphicon glyphicon-star" aria-hidden="true"></span> 
                      <span>1000</span>
                    </div>
                    <div>
                      <button type="button" class="btn btn-primary btn-xs">回复</button>
                    </div>
                    <div>
                      <button type="button" class="btn btn-primary btn-xs">举报</button>
                    </div>
                </div>
              </div>
        </div>
    </div>
</div>
</body>
</html>